{extend name="public/layout" /}
{block name="head_css"}
    <link rel="stylesheet" href="/static/index/css/header.css?v={$version}">
    <style>
        .sort-box {
            box-sizing: border-box;
            padding: .3rem;
            font-size: 0;
        }

        .sort-box .sitem {
            width: 33%;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
        }

        .sort-box .sitem>a,.sort-box .sitem>a:link,.sort-box .sitem>a:active {
            font-size: .9rem;
            color: #333;
            padding: .1rem .3rem;
            text-decoration: none;
            border: #fff solid 1px;
        }

        .sort-box .sitem.chosen>a {
            border-color: #333;
        }

        .list-box {
            box-sizing: border-box;
            overflow: hidden;
            padding: 0;
        }

        .list-box .content {
            width: 100%;
            overflow: hidden;
        }

        .list-box .content>a {
            text-decoration: none;
        }

        .list-box .content>a .litem {
            width: 100%;
            margin-top: 7px;
            box-sizing: border-box;
            padding: .3rem;
            font-size: 0;
        }

        .list-box .content>a .litem .left,.list-box .content>a .litem .right {
            display: inline-block;
            vertical-align: middle;
        }

        .list-box .content>a .litem .left {
            width: 20%;
            margin-right: 3%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .list-box .content>a .litem .right {
            width: 77%;
        }

        .list-box .content>a .litem .right .ltit {
            font-size: 1rem;
            color: #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .list-box .content>a .litem .right .linfo {
            margin-top: 3px;
            font-size: 0;
            color: #ddd;
        }

        .list-box .content>a .litem .right .linfo .icon,.list-box .content>a .litem .right .linfo .words {
            display: inline-block;
            vertical-align: middle;
        }

        .list-box .content>a .litem .right .linfo .icon {
            width: 5%;
            padding-top: 5%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            margin-right: 3px;
        }

        .list-box .content>a .litem .right .linfo .icon.read {
            background-image: url('/static/index/image/icon_list_read_459702.png');
        }

        .list-box .content>a .litem .right .linfo .icon.date {
            background-size: 70%;
            background-image: url('/static/index/image/icon_list_date_333.png');
        }

        .list-box .content>a .litem .right .linfo .icon.comment {
            background-size: 70%;
            background-image: url('/static/index/image/icon_list_comment_ff7200.png');
        }

        .list-box .content>a .litem .right .linfo .words {
            font-size: .7rem;
            color: #aaa;
            margin-right: 5px;
        }

        .list-box .content>a .litem .right .lcon {
            font-size: .7rem;
            color: #777;
        }

        .list-box .content>a .litem .right .lcon {
            margin-top: 3px;
        }

        .load-box {
            box-sizing: border-box;
            font-size: 0;
            overflow: hidden;
            padding-top: 10px;
            padding-bottom: 5px;
            text-align: center;
        }

        .load-box .licon,.load-box .ltips {
            display: inline-block;
            vertical-align: middle;
        }

        .load-box .licon {
            width: 6%;
            padding-top: 6%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url('/static/index/image/icon_loading.svg');
        }

        .load-box .ltips {
            font-size: .8rem;
            color: #ccc;
        }
    </style>
{/block}
{block name="main"}
    <!-- 头部 -->
        <div class="container sam-header">
            <div class="back">
                <a href="{:url('index/index')}">
                    <div class="arrow"></div>
                </a>
            </div>
            <div class="name">{$title}</div>
            <div class="edit">
                <a href="{:url('add')}">我要发布</a>
            </div>
        </div>

        <div class="container sam-white-bg sort-box">
            <div class="sitem {if condition="$order eq 1"}chosen{/if}">
                <a href="{:url('index',array('order'=>'1'))}">点赞最高</a>
            </div>
            <div class="sitem {if condition="$order eq 2"}chosen{/if}">
                <a href="{:url('index',array('order'=>'2'))}">最新发布</a>
            </div>
            <div class="sitem {if condition="$order eq 3"}chosen{/if}">
                <a href="{:url('index',array('order'=>'3'))}">浏览最多</a>
            </div>
        </div>
    <!-- 头部 END -->

    <!-- 工程信息 -->
    <div class="container list-box">
        <div class="content">
            {foreach name="list" item="item"}
                <a href="{:url('detail',array('id'=>$item.id))}">
                    <div class="sam-white-bg litem">
                        <div class="left"><img width="100%" src="{$item.logo}"></div>
                        <div class="right">
                            <div class="ltit">{$item.contacts}</div>
                            <div class="linfo">
                                <div class="icon read"></div>
                                <div class="words">{$item.pv}</div>
                                <div class="icon comment"></div>
                                <div class="words">{$item.comment_num}</div>
                                <div class="icon date"></div>
                                <div class="words">{$item.update_time|date='Y-m-d H:i:s',###}</div>
                            </div>
                            <div class="lcon">{$item.detail}</div>
                        </div>
                    </div>
                </a>
            {/foreach}
        </div>
    </div>
    <!-- 工程信息 END -->

    {if condition="$list_end eq 0"}
        <!-- 加载框 -->
        <div class="load-box">
            <div class="licon"></div>
            <div class="ltips">正在加载列表</div>
        </div>
    {/if}
    <!-- 加载框 END -->
{/block}
{block name="footer"}
{/block}
{block name="script"}
    {if condition="$list_end eq 0"}
        <script>
            var loadHeight = $('.load-box').height();
            var windowHeight = $(window).height();
            var scTop = 0;
            var ajaxLoading = false;
            var is_end = false;
            var page = 2;
            $(window).scroll(function(e) {
                if($(window).scrollTop() - scTop > 0&&($(window).scrollTop() + windowHeight >= $(document).height() - loadHeight)&&!ajaxLoading) {
                    if(ajaxLoading) return true;
                    $.ajax({
                        url: '{:url('ajax_list')}?page='+page+'&order={$order}',
                        method: 'post',
                        dataType: 'json',
                        beforeSend: function() {
                            ajaxLoading = true;
                        },
                        success: function (res) {
                            setTimeout(function () {
                                page = res.data.page;
                                if(res.data.is_end == 1){
                                    is_end = true;
                                    $('.load-box').each(function(){
                                        $(this).remove();
                                    });
                                }
                                $('.list-box>.content').append(res.data.content);
                                ajaxLoading = false;
                            },1000);
                        },
                        error: function (xhr,status,error) {
                            alert('网络错误');
                        },
                        complete: function () {
                            ajaxLoading = false;
                        }
                    });
                }
                scTop = $(window).scrollTop();
            });
        </script>
    {/if}
{/block}